{% extends 'common/goodspublic.html' %}
{% load static %}


{% block title %}购物车{% endblock %}
{% block head %}
    <script src="{% static 'js/jquery-1.10.2.min.js' %}"></script>
{% endblock %}


{% block header %}
    <header data-am-widget="header" class="am-header am-header-default sq-head ">
        <div class="am-header-left am-header-nav">
            <a href="javascript:history.back()" class="">
                <i class="am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="" class="">购物车</a>
        </h1>
    </header>
{% endblock %}

{% block content %}
    <form method="get" action="{%url 'orders:确认订单'%}">
    <div style="height: 49px;"></div>
    <ul class="shopcart-list">
        {% for sku,count in goods.items %}
            <li>
                <label class="am-checkbox am-warning">
                    <input name="sku_ids" type="checkbox" checked="checked" value="{{ sku.pk }}" data-am-ucheck checked>
                </label>
                <a href="{% url 'goods:商品详情' sku.pk %}"><img src="{{ MEDIA_URL }}{{ sku.LOGO }}" class="shop-pic"/></a>
                <div class="shop-list-mid">
                    <div class="tit"><a href="{% url 'goods:商品详情' sku.pk %}">
                        {{ sku.spu.spu_name }}{{ sku.sku_name }}</a></div>
                    <b id="price" class="shop-list-price">￥<i>{{ sku.price }}</i></b>
                </div>
                <div class="list-cart1">
                    <div class="d-stock">
                        <a class="decrease">-</a>
                        <input sku_id="{{ sku.pk }}" readonly="" class="text_box"  type="text"
                               value="{{ count }}">
                        <a class="increase">+</a>
                    </div>
                </div>
            </li>
        {% empty %}
            <!--购物车空的状态-->
            <div class="login-logo">
                <img src="{% static 'images/care.png' %}">
                <p>亲、您的购物车还是空空的哦，快去装满它!</p>
                <a href="{% url 'goods:商品分类' '' '' %}" class="goshopping">前去逛逛</a>
            </div>
        {% endfor %}
        <div style="height: 10px; background: #eee;"></div>
    </ul>

    <div class="shop-fix">

        <label class="am-checkbox am-warning">
            <input id="check_all" checked="checked" type="checkbox" value="" data-am-ucheck checked>
        </label>
        <a class="del">全选</a>
        <input type="button" class="js-btn" value="去结算">
        <div class="js-text">
            <P>合计：<b>￥<i id="total_price"></i></b></P>
            <p class="js-car">免费配送</p>
        </div>
    </div>
    </form>
{% endblock %}


{% block foot_js %}
    <script>
        //购物数量加减
        $(function () {
            $('.increase').click(function () {
                var self = $(this);
                var current_num = parseInt(self.siblings('input').val());
                //发送ajax请求
                var sku_id = self.siblings('input').attr('sku_id');
                var data = {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'count': 1,
                    'sku_id': sku_id
                };
                $.ajax({
                    type: 'post',
                    url: "{% url 'shopcart:增加' %}",
                    data: data,
                    dataType: 'json',
                    success: function (data) {
                        console.debug(data);
                        if (data.code == 0) {
                            //验证成功
                            current_num += 1;
                            self.siblings('input').val(current_num);
                            totalPrice();
                        }
                        else if (data.code == 4) {
                            //未登录
                            if (confirm('未登录，知否马上登录')) {
                                location.href = "{% url 'user:登录' %}"
                            }
                        } else {
                            alert(data.errmsg)
                        }
                    }
                });
            });

            $('.decrease').click(function () {
                var self = $(this);
                var current_num = parseInt(self.siblings('input').val());
                //发送ajax请求
                var sku_id = self.siblings('input').attr('sku_id');
                var data = {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'count': -1,
                    'sku_id': sku_id
                };
                $.ajax({
                    type: 'post',
                    url: "{% url 'shopcart:减少' %}",
                    data: data,
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == 0) {
                            if (current_num > 0) {
                                current_num -= 1;
                                self.siblings('input').val(current_num);
                                totalPrice();
                                if (current_num <= 0) {
                                    $.ajax({
                                        type: 'post',
                                        url: "{% url 'shopcart:删除' %}",
                                        data: {'csrfmiddlewaretoken': '{{ csrf_token }}', 'sku_id': sku_id},
                                        dataType: 'json',
                                        success: function (data) {
                                            if (data.code == 0) {
                                                location.href = "{% url 'shopcart:购物车' %}"
                                            } else {
                                                alert(data.errmsg)
                                            }
                                        }
                                    })
                                }
                            }
                        } else {
                            alert(data.errmsg)
                        }
                    }
                });
            });

            //计算只有没选中的商品总价格
            function totalPrice() {
                var checkboxes = $(".shopcart-list").find(':checked');
                {#console.debug(checkboxes);#}
                var total_price = 0;
                $.each(checkboxes, function (i, e) {
                    //e为被选中的复选框
                    var li = $(e).closest("li");
                    //console.debug(li)
                    var price = $(li).find('.shop-list-price i').text();
                    {#console.debug(price);#}
                    var count = $(li).find('.text_box').val();
                    {#console.debug(count);#}
                    total_price += price * count;
                    {#console.debug(total_price);#}

                });
                //toFixed保留小数位2位
                $('#total_price').text(total_price.toFixed(2))
            }

            totalPrice();

            //全选框
            $('#check_all').on('change', function () {
                var status = $(this).prop('checked');
                $(".shopcart-list").find(':checkbox').prop("checked", status);
                totalPrice();
            });

            //复选框和全选框状态
            $(".shopcart-list").find(':checkbox').on('change', function () {
                totalPrice();
                if ($(".shopcart-list").find(':checkbox').length == $(".shopcart-list").find(':checked').length) {
                    $('#check_all').prop('checked', true)
                }
                else {
                    $('#check_all').prop('checked', false)
                }
            });
            //判断提交购物车
            $('.js-btn').on('click',function () {
                if($(".shopcart-list").find(':checked').length > 0){
                    $('form').submit();
                }else {
                    alert('请选择要购买的商品')
                }
            })
        });
    </script>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/amazeui.min.js' %}"></script>
{% endblock %}

